<template>
  <div>
    <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
    <el-container style="height: 1400px;;width:100% ;">
      <el-header class="homeline" style="display: flex; justify-content: space-between; align-items: center;">
        <div class="home clickable-text" style="font-size:30px; cursor: pointer;" @click="handleClick">
          基于大数据的新能源汽车信息可视化分析预测系统
        </div>
        <div
          style="text-align: right;font-size: 25;display: flex; flex-direction: row; align-items: center; gap: 10px;">
          <router-link to="/task1" class="custom-round-button">总体分析</router-link>
          <router-link to="/task2" class="custom-round-button">热门与市场</router-link>
          <router-link to="/task3" class="custom-round-button">品牌销量Top10</router-link>
          <router-link to="/task4" class="custom-round-button">热门品牌销量与预测</router-link>
          <router-link to="/task5" class="custom-round-button">国产新能源的崛起</router-link>
        </div>
      </el-header>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      if (this.$route.path !== '/') {
        this.$router.push('/');
      }
    }
  }
}
</script>

<style>
.home {
  text-decoration: none;
  /* 移除下划线 */
  cursor: pointer;
  /* 改变鼠标样式为手指形状，表示可点击 */

}
.homeline{
  background-color: #7ff7d9;
}
/* 移除 el-container 的边框 */
.el-container {
  border: none; /* 这里移除了边框样式 */
}

.custom-round-button {
  background-color: #409eff;
  /* 设置背景色 */
  /* rounded-radius: 20px; */
  /* 设置圆角半径 */
  border: none;
  /* 移除边框 */
  color: white;
  /* 设置文字颜色 */
  padding: 8px 16px;
  /* 调整按钮大小 */
  text-decoration: none;
  /* 移除默认的下划线 */
  cursor: pointer;
  /* 设置鼠标悬停时的指针样式 */
  border-radius: 16px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color:hwb(150 99% 0%); /* 例如：#f0f0f0 为浅灰色 */
}
</style>